<template>
	<view class="flex flex-column">
		<view class="flex flex-column m-2">
			<view class="flex flex-row align-center">
				<view>
					<u-avatar src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2289482459,2570749872&fm=26&gp=0.jpg"></u-avatar>
				</view>
				<view class="m-1">
					<view class="font-sm font-weight-bold">马蕴蕴</view>
					<view class="font-sm text-secondary">127689769</view>
					<view class="font-sm text-secondary">女</view>
				</view>
			</view>
			<view class="font-sm font-weight-bold my-1">大威天龙，世尊地藏，般若诸佛，般若巴嘛空</view>
			<view class="flex align-center my-1 font-sm">
				<view class="flex flex-column align-center mr-2">
					<view class="font-weight-bold">22</view>
					<view>关注</view>
				</view>
				<view class="flex flex-column align-center mx-2">
					<view class="font-weight-bold">200</view>
					<view>粉丝</view>
				</view>
				<view class="flex flex-column align-center mx-2">
					<view class="font-weight-bold">1万+</view>
					<view>获赞</view>
				</view>
				<view class="flex flex-column align-center mx-2">
					<view class="font-weight-bold">14</view>
					<view>收藏</view>
				</view>
			</view>
		</view>
		<view class="mx-2">
			<view>
				<view class="flex align-center">
					<scroll-view scroll-x scroll-into-view="tab1" scroll-with-animation class="scroll-row" style="height: 92rpx;">
						<view class="flex ">
							<view id="tab0" class="scroll-row-item px-1 py-2 " :class="tabIndex === 0?'text-main font-weight-bold':''"
							 @click="changeTab(0)">
								动态
							</view>
							<view id="tab1" class="scroll-row-item px-1 py-2 " :class="tabIndex === 1?'text-main font-weight-bold':''"
							 @click="changeTab(1)">
								喜欢
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:'+scrollH+'px;'">
				<swiper-item>
					<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="addDongTaiData">
						<block v-for="(item,index) in dongtaiList">
							<!-- 图片 -->
							<view class="flex w-100 p-0 m-0">
								<u-grid v-if="item.imgs.length==1" :col="1" :border="false">
									<u-image mode="aspectFill" :showLoading="false" height="360rpx" @click="previewImage(0,item.imgs)" :src="item.imgs[0]" border-radius="10"></u-image>
								</u-grid>
								<u-grid v-else :col="3" :border="false">
									<u-image style="padding:  5rpx;" :showLoading="false" @click="previewImage(i,item.imgs)"  v-for="(img,i) in item.imgs" :key="i" width="33.3333333333333333%" height="240rpx" :src="img" border-radius="10"></u-image>					 
								</u-grid>
							</view>
							<!-- 图片简述 发布时间 -->
							<view class="flex">
								<u-read-more ref="uReadMore" :shadow-style="readmorestyle" show-height="400" close-text="展开" color="#000000">
									<u-parse :html="item.js"></u-parse>
								</u-read-more>
							</view>
						</block>
						<u-loadmore margin-top="30" margin-bottom="30" font-size="30" color="#000000" icon-type="flower" :status="loadStatusDt"></u-loadmore>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="addLikeData">
						<block v-for="(item,index) in likeList">
							<!-- 图片 -->
							<view class="flex w-100 p-0 m-0">
								<u-grid v-if="item.imgs.length==1" :col="1" :border="false">
									<u-image mode="aspectFill" :showLoading="false" height="360rpx" @click="previewImage(0,item.imgs)" :src="item.imgs[0]" border-radius="10"></u-image>
								</u-grid>
								<u-grid v-else :col="3" :border="false">
									<u-image style="padding:  5rpx;" :showLoading="false" @click="previewImage(i,item.imgs)"  v-for="(img,i) in item.imgs" :key="i" width="33.3333333333333333%" height="240rpx" :src="img" border-radius="10"></u-image>					 
								</u-grid>
							</view>
							<!-- 图片简述 发布时间 -->
							<view class="flex">
								<u-read-more ref="uReadMore" :shadow-style="readmorestyle" show-height="400" close-text="展开" color="#000000">
									<u-parse :html="item.js"></u-parse>
								</u-read-more>
							</view>
						</block>
						<u-loadmore margin-top="30" margin-bottom="30" font-size="30" color="#000000" icon-type="flower" :status="loadStatusLike"></u-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import wImgCard from '@/components/wboot/w-img-card-swiper.vue';
	import fxData from "@/common/data/fx.js";
	export default {
		components: {
			wImgCard
		},
		data() {
			return {
				loadStatusDt: 'loadmore',
				loadStatusLike: 'loadmore',
				show: false,
				_freshing: false,
				triggered: false,
				scrollH: 500,
				tabIndex: 0,
				background: {
					background: '#ffffff'
				},
				dongtaiList:fxData.data,
				likeList:fxData.data,
				readmorestyle: {
					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					paddingTop: "80rpx",
					marginTop: "-80rpx"
				}
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - uni.upx2px(101)
				}
			})
		},
		methods: {
			addDongTaiData(){
				this.loadStatusDt = 'loading';
				setTimeout(() => {
					let arr = [];
					for (let i = 0; i < 10; i++) {
						let index = this.$u.random(0, fxData.data.length - 1);
						// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
						let item = JSON.parse(JSON.stringify(fxData.data[index]))
						item.id = this.$u.guid();
						arr.push(item);
					}
					this.dongtaiList = [...this.dongtaiList,...arr]
					this.loadStatusDt = 'loadmore';
				}, 1000)
			},
			addLikeData(){
				this.loadStatusLike = 'loading';
				setTimeout(() => {
					let arr = [];
					for (let i = 0; i < 10; i++) {
						let index = this.$u.random(0, fxData.data.length - 1);
						// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
						let item = JSON.parse(JSON.stringify(fxData.data[index]))
						item.id = this.$u.guid();
						arr.push(item);
					}
					this.likeList = [...this.likeList,...arr]
					this.loadStatusLike = 'loadmore';
				}, 1000)
			},
			// 监听滑动
			onChangeTab(e) {
				this.changeTab(e.detail.current)
			},
			// 切换选项
			changeTab(index) {
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index
				this.scrollInto = 'tab' + index
			},
		}
	}
</script>

<style>

</style>
